<template>
  <div class="customers-management">
    <div class="page-header">
      <h2>客户管理</h2>
      <el-input
        v-model="searchQuery"
        placeholder="搜索客户"
        style="width: 200px"
      >
        <template #prefix>
          <el-icon><Search /></el-icon>
        </template>
      </el-input>
    </div>

    <el-table :data="filteredCustomers" style="width: 100%">
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column label="客户信息">
        <template #default="scope">
          <div class="customer-info">
            <el-avatar :size="40" />
            <div>
              <div>{{ scope.row.name }}</div>
              <div class="customer-email">{{ scope.row.email }}</div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="phone" label="联系电话" />
      <el-table-column prop="orderCount" label="订单数" />
      <el-table-column prop="totalSpent" label="消费金额">
        <template #default="scope">
          ¥{{ scope.row.totalSpent }}
        </template>
      </el-table-column>
      <el-table-column prop="registerDate" label="注册时间" />
      <el-table-column label="操作" width="200">
        <template #default="scope">
          <el-button size="small" @click="viewCustomerDetails(scope.row)">详情</el-button>
          <el-button size="small" type="danger" @click="blockCustomer(scope.row)">
            {{ scope.row.blocked ? '解除禁用' : '禁用' }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { Search } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';

const searchQuery = ref('');

// 模拟客户数据
const customers = ref([
  {
    id: 1,
    name: '张三',
    email: 'zhangsan@example.com',
    phone: '13800138000',
    orderCount: 5,
    totalSpent: 1299.99,
    registerDate: '2024-01-15',
    blocked: false
  },
  {
    id: 2,
    name: '李四',
    email: 'lisi@example.com',
    phone: '13900139000',
    orderCount: 3,
    totalSpent: 899.50,
    registerDate: '2024-02-20',
    blocked: false
  }
]);

const filteredCustomers = computed(() => {
  if (!searchQuery.value) return customers.value;
  const query = searchQuery.value.toLowerCase();
  return customers.value.filter(customer => 
    customer.name.toLowerCase().includes(query) ||
    customer.email.toLowerCase().includes(query) ||
    customer.phone.includes(query)
  );
});

const viewCustomerDetails = (customer) => {
  ElMessage.success('查看客户详情功能待实现');
};

const blockCustomer = (customer) => {
  customer.blocked = !customer.blocked;
  ElMessage.success(`${customer.blocked ? '禁用' : '解除禁用'}成功`);
};
</script>

<style scoped>
.customers-management {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

h2 {
  margin: 0;
  color: #2c3e50;
}

.customer-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.customer-email {
  color: #666;
  font-size: 13px;
}
</style> 